<template>
    <div class="merchant-details">
      <el-drawer :modal-append-to-body="false" :append-to-body="true" title="添加商品" size="70%" class="box-drawer"
        :with-header="false" :visible.sync="drawer" :show-close="true" @close="closedinvitation">
        <!-- 头部-->
        <div style="position: relative">
          <div class="drawerTitle" style="background-color:#409eff !important;padding: 13px 15px;">
            <span>添加商品</span>
            <div class="close" @click="closedinvitation" style="top: 12px;">
              <i class="el-icon-close" style="font-size: 22px;" />
            </div>
          </div>
        </div>
      <!-- <el-drawer
        title="添加商品"
        :visible.sync="drawer"
        :append-to-body="true"
        @closed="closedinvitation"
        size="70%"
        :wrapperClosable="false"
      > -->

        <div class="layout" style="margin:15px 0 0 0;">
          <el-form
            label-position="left"
            :inline="true"
            size="small"
            ref="eventsForm"
            :model="eventsForm"
          >
            <div class="configform-box">
              <!-- <el-form-item
                label="关键字"
                class="form-box-item"
                label-width="80px"
                prop="activity_name"
              >
                <el-input
                  placeholder="请输入关键字"
                  v-model="eventsForm.activity_name"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="分类"
                class="form-box-item"
                label-width="50px"
                prop="cate_id"
              >
                <el-cascader
                  v-model="eventsForm.cate_id"
                  :options="categoryList"
                  :props="{
                    checkStrictly: true,
                    value: 'id',
                    label: 'name',
                    children: 'children',
                  }"
                  clearable
                />
              </el-form-item> -->
              <el-form-item>
                <!-- <el-button type="primary" style="height: 30px" @click="getListWay"
                  >查询</el-button
                >
                <el-button type="info" style="height: 30px" @click="resetForm('eventsForm')"
                  >重置</el-button
                > -->
                <el-button
                  type="warning"
                  style="height: 30px"
                  @click="Batchdeletion"
                  >批量添加</el-button
                >
              </el-form-item>
            </div>
            <div class="configform-box">
              <div>
                <el-table
                  v-loading="loading"
                  highlight-current-row
                  :data="productlist"
                  :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                  }"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column
                    align="center"
                    prop="main_image"
                    label="商品图片"
                  >
                    <template slot-scope="{ row }">
                      <el-image
                        :src="row.main_image"
                        style="width: 40px; height: 40px;"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="name"
                    label="商品名称"
                  >
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.goods_name + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.goods_name ? scope.row.goods_name : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="category_name1"
                    label="商品分类"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="mer_name"
                    label="所属店铺"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    prop="retail_price"
                    label="价格"
                  ></el-table-column>
                  <el-table-column
                    fixed="right"
                    width="100"
                    prop="address"
                    label="操作"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-button type="text" @click="handleadd(scope.row)">
                        添加
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="eventsForm.page"
                  :limit.sync="eventsForm.count"
                  @pagination="getListWay"
                /> -->
              </div>
            </div>
          </el-form>
        </div>
      </el-drawer>
    </div>
  </template>
  <script>
  import { getCategoryList } from "@/api/commodity/index";
  import { listGood } from "@/api/index";
  export default {
    name: "detail",
    props: [
      "goodsIds",
      "shappingid"
    ],
    components: {},

    data() {
      return {
        goodsids: this.goodsIds,
        goodsIdsRow: [],
        drawer: true,
        activeName: "first",
        // 商品类目列表
        categoryList: [],
        eventsForm: {
          activity_id:this.shappingid,
          activity_type:5,
          goods_id: [],
        },
        total: 0,
        loading: true,
        productlist: [],
        multipleSelection: [],
      };
    },
    created() {
      this.getConfigurationWay();
    },
    methods: {
      getConfigurationWay() {
        getCategoryList().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.categoryList = res.data;
        });
        this.getListWay();
      },
      getListWay() {
        this.loading = true;
        if( this.goodsids.length >= 0){
          this.eventsForm.goods_id = this.goodsids
        listGood(this.eventsForm).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.productlist = res.data;
          this.loading = false;
        });
        }else{
          this.loading = false;
         
        }

       
      },

      // 关闭抽屉
      closedinvitation() {
        this.$parent.closeaddproduct();
      },
      handleSelectionChange() {},
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getListWay();
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //批量添加
      Batchdeletion() {
        if (this.multipleSelection.length == 0) {
          this.$alert("请选择商品", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        } else {
          let arr = [];
          arr = this.multipleSelection
          this.$nextTick(() => {
            this.$parent.addproductWay(this.multipleSelection);
          this.goodsids = this.goodsids.filter(goodsId => {
            return !arr.some(item => item.id === goodsId);
          });
            this.getListWay();
          });
        }
      },
      handleadd(row) {
        this.$parent.addproductWay([row]);
        this.goodsids = this.goodsids.filter(id => id !== row.id);
        this.getListWay();
      },
    },
  };
  </script>
  <style lang="scss">
  </style>
  <style lang="scss" scoped>
  .blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
  }

  .configform-box {
    margin: 0 20px;

    .form-box-item {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 12px;
      color: #4c4c4c;

      .form-tip {
        font-size: 12px;
        color: #4c4c4c;

        .tip-key {
          font-weight: bold;
          text-decoration: underline;
        }
      }
    }

    .table-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .table-top-left {
        display: flex;

        div {
          margin-right: 20px;
        }
      }

      .table-top-right {
        display: flex;

        div {
          margin-left: 20px;
        }
      }
    }

    .table-num {
      margin-left: 5px;
      background: #f0f0f0;
      width: 35px;
      border-radius: 5px;
    }
  }

  .button-box {
    margin-left: 30px;
    margin-bottom: 20px;

    .next-button {
      background-color: #eeeeee;
      color: #4c4c4c;
      height: 30px;
    }
  }
  </style>
